<template>
  <!-- 勘探列表 -->
  <div class="app-container-detail exploration-data">
    <div class="main-content">
      <div class="main-content-body">
        <div class="main-content-body-top">
          <div class="view-signed-file">
            <el-button size="small" :disabled="formData.status === '4' || formData.status === '5'? false : true" type="primary" icon="el-icon-view" plain @click="viewSignedFile">预览签字文件</el-button>
            <el-button size="small" :disabled="formData.status === '4' || formData.status === '5'? false : true" type="primary" icon="el-icon-download" plain @click="downSignedFile">签字文件</el-button>
          </div>
          <el-tabs v-model="activeName" type="card" class="tab-content">
            <el-tab-pane label="基本信息" name="first">
              <!--基本信息-->
              <div class="data-form-item">
                <table class="detail-table" cellpadding="0" cellspacing="0">
                  <tr>
                    <td>
                      <span class="labelTitle">项目名称</span>
                    </td>
                    <td colspan="3">
                      <span class="infoText">{{ proName }}</span>
                    </td>
                    <td>
                      <span class="labelTitle">勘探点编号</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.explorationCode }}</span>
                    </td>
                    <td>
                      <span class="labelTitle">钻孔类型</span>
                    </td>
                    <td>
                      <span v-if="formData.drillHole === '0'" class="infoText">钻探</span>
                      <span v-if="formData.drillHole === '1'" class="infoText">静探</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="labelTitle">钻探类型</span>
                    </td>
                    <td>
                      <span v-if="formData.drillingType" class="infoText">{{ formatDrillingType(formData.drillingType) }}</span>
                      <span v-else class="infoText">-</span>
                    </td>
                    <td>
                      <span class="labelTitle">钻孔子类</span>
                    </td>
                    <td>
                      <span v-if="formData.explorationType" class="infoText">{{ formatExplorationType(formData.explorationType) }}</span>
                      <span v-else class="infoText">-</span>
                    </td>
                    <td>
                      <span class="labelTitle">设计深度</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.depth }}m</span>
                    </td>
                    <td>
                      <span class="labelTitle">勘探点高程</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.elevation }}m</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="labelTitle">坐标经度</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.x }}</span>
                    </td>
                    <td>
                      <span class="labelTitle">坐标纬度</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.y }}</span>
                    </td>
                    <td>
                      <span class="labelTitle">坐 标 X</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.x1 }}</span>
                    </td>
                    <td>
                      <span class="labelTitle">坐 标 Y</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.y1 }}</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="labelTitle">计划开始</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.startTime }}</span>
                    </td>
                    <td>
                      <span class="labelTitle">计划结束</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.endTime }}</span>
                    </td>
                    <td>
                      <span class="labelTitle">实际开始</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.actualStartTime }}</span>
                    </td>
                    <td>
                      <span class="labelTitle">实际结束</span>
                    </td>
                    <td>
                      <span class="infoText">{{ formData.actualEndTime }}</span>
                    </td>
                  </tr>
                </table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已分配设备" name="second">
              <!--已分配设备-->
              <DividedEquipment :equipment-type="equipmentType" />
            </el-tab-pane>
            <el-tab-pane label="已分配人员" name="third">
              <!--已分配人员-->
              <AssignedPersonnel :user-types="userTypes" />
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 表格展示start -->
        <div class="marginT10">
          <el-table
            ref="multipleTable"
            v-loading="tableLoading"
            stripe
            class="table-list"
            :data="tableData"
            border
            height="520px"
            style="width: 100%"
            :row-style="rowClass"
          >
            <el-table-column fixed="left" label="回次" type="index" width="50" align="center" />
            <el-table-column prop="layerNum" fixed="left" label="层号" type="index" width="90" align="center">
              <template slot-scope="scope">
                <el-select
                  v-if="editLayering"
                  v-model="scope.row.layerNum"
                  style="width:100%"
                  size="small"
                  clearable
                  placeholder="层号"
                  @change="changeLayerNum(scope.row, $event)"
                >
                  <el-option
                    v-for="item in LayerNumList"
                    :key="item.layerNum"
                    :label="item.layerNum"
                    :value="item.layerNum"
                  />
                </el-select>
                <span v-else>{{ scope.row.layerNum }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="left" label="描述深度(m)" width="100" align="center">
              <el-table-column prop="outStartDepth" label="由" width="50" align="center" />
              <el-table-column prop="outEndDepth" label="至" width="50" align="center" />
            </el-table-column>
            <el-table-column label="地层描述" align="center">
              <el-table-column prop="soilName" label="土的名称" :formatter="(row) => formatSoilNameList(row.soilName)" width="100" align="center" />
              <el-table-column prop="soilColor" label="颜色" width="70" align="center" />
              <el-table-column :show-overflow-tooltip="true" prop="otherProperties" label="其他性质" min-width="350" align="center" />
              <el-table-column prop="glossReaction" :formatter="formatGlossReaction" label="光泽反应" width="100" align="center" />
              <el-table-column prop="vibrationResponse" :formatter="formatVibrationResponse" label="摇振反应" width="70" align="center" />
              <el-table-column prop="dryStrength" :formatter="formatDryStrength" label="干强度" width="70" align="center" />
              <el-table-column prop="tenacity" :formatter="formatTenacity" label="韧性" width="70" align="center" />
            </el-table-column>
            <el-table-column prop="soilStatus" :formatter="formatSoilStatus" label="状态(粘性土)" width="80" align="center" />
            <el-table-column prop="humidity" :formatter="formatHumidity" label="湿度" width="70" align="center" />
            <el-table-column prop="density" :formatter="(row) => formatDensity(row.density)" label="密度" width="70" align="center" />
            <el-table-column v-if="EnterpriseType === '1'" prop="remark" label="异常说明" align="center">
              <el-table-column label="速度异常(m)" width="100" align="center">
                <template slot-scope="{row}">
                  <span v-if="formatRemark(row.remark) && formatRemark(row.remark).isSpeedReason" style="color:orange;font-weight: bold">{{ formatRemark(row.remark).isSpeedReason }}</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column label="位置异常(m)" width="160" align="center">
                <el-table-column label="数据异常" width="80" align="center">
                  <template slot-scope="{row}">
                    <span v-if="formatRemark(row.remark) && formatRemark(row.remark).isLocationException.dataIsLocationReason" style="color:orange;font-weight: bold">{{ formatRemark(row.remark).isLocationException.dataIsLocationReason }}</span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column label="照片异常" width="80" align="center">
                  <template slot-scope="{row}">
                    <span v-if="formatRemark(row.remark) && formatRemark(row.remark).isLocationException.picIsLocationReason" style="color:orange;font-weight: bold">{{ formatRemark(row.remark).isLocationException.picIsLocationReason }}</span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="时间异常(min)" width="160" align="center">
                <el-table-column label="数据异常" width="80" align="center">
                  <template slot-scope="{row}">
                    <span v-if="formatRemark(row.remark) && formatRemark(row.remark).isTimeException.dataIsLocationReason" style="color:orange;font-weight: bold">{{ formatRemark(row.remark).isTimeException.dataIsLocationReason }}</span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column label="照片异常" width="80" align="center">
                  <template slot-scope="{row}">
                    <span v-if="formatRemark(row.remark) && formatRemark(row.remark).isTimeException.picIsLocationReason" style="color:red">{{ formatRemark(row.remark).isTimeException.picIsLocationReason }}</span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column label="原位测试" align="center">
              <el-table-column prop="inSituCode" label="编号" width="60" align="center" />
              <el-table-column label="深度/m" width="60" align="center">
                <el-table-column prop="inSitStartDepth" label="由" width="60" align="center" />
                <el-table-column prop="inSitEndDepth" label="至" width="60" align="center" />
              </el-table-column>
              <el-table-column prop="clubLength" label="杆长(m)" width="70" align="center" />
              <el-table-column prop="measuredNum" label="实测击数/10cm" width="120" align="center" />
            </el-table-column>
            <el-table-column label="照片/视频" width="120" align="center">
              <template slot-scope="{row,$index}">
                <i class="el-icon-picture show-img" @click="showPicture(row.outSideId,$index)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!--预览图片-->
    <previewVideo ref="previewVideo" :img-id-list.sync="imgIdList" />
    <!--<pdf v-if="pdfUrl" ref="pdf" :src="pdfUrl" />-->
  </div>
</template>

<script>
import { getEnterpriseType } from '@/utils/auth'
// import pdf from 'vue-pdf'
import { listHierarchicaSettingByProId } from '@/api/projectManage/projectData/LayeredSettings'
// 已分配设备
import DividedEquipment from './components/DividedEquipment'
// 已分配人员
import AssignedPersonnel from './components/AssignedPersonnel'
// 系统字典一次性请求多条数据
import { getDictTypes } from '@/api/system/dict/data'
// 附件下载
import { fileDownLoad } from '@/api/common/upload.js'
import previewVideo from '@/components/basicinfo/previewVideo'
import { getOutSidePhone } from '@/api/projectManage/projectData/dataAcquisition'
import { mapState } from 'vuex'
export default {
  name: 'Index',
  components: {
    DividedEquipment,
    AssignedPersonnel,
    previewVideo
    // pdf
  },
  props: {
    editLayering: {
      type: Boolean,
      default: () => false
    },
    cityOptions: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => ({
        explorationCode: '', // 勘探点编号
        explorationType: '', // 勘探点类型
        x: '', // 经度
        y: '', // 纬度
        elevation: '', // 勘探点高程
        depth: '', // 勘探点深度
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        initialWaterLevel: '', // 初见水位
        fixedLevel: '' // 稳定水位
      })
    },
    equipmentType: { // 分配的设备
      type: Array,
      default: () => []
    },
    userTypes: { // 分配的人
      type: Array,
      default: () => []
    },
    pdfUrl: { // pdf地址
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      EnterpriseType: getEnterpriseType(), // 单位类型
      proName: '', // 项目名称
      activeName: 'first', // 选中的tab
      glossReactionList: [], // 光泽反应
      vibrationResponseList: [], // 摇震反应
      dryStrengthList: [], // 干强度
      tenacityList: [], // 韧性
      humidityList: [], // 湿度
      densityList: [], // 密度
      soilNameList: [], // 土的名称
      soilStatusList: [], // 土的状态
      currentIndex: -1,
      imgIdList: [],
      currentProvince: '',
      tableLoading: false, // 表格加载
      selectRow: [],
      // 钻探类型
      drillingTypeOptions: [
        { dictValue: '0', dictLabel: '钻孔' },
        { dictValue: '1', dictLabel: '混合' },
        { dictValue: '2', dictLabel: '井探' },
        { dictValue: '3', dictLabel: '槽(坑)探' }
      ],
      LayerNumList: [], // 分层列表
      layerNum: '',
      changeLayerNumData: [] // 修改层号的数据
    }
  },
  computed: {
    ...mapState({
      explorationType: state => state.basicInfo.explorationType, // 勘探点类型全部
      proId: state => state.basicInfo.proId
    })
  },
  watch: {
    tableData(newVal) {
      newVal.length === 0 && this.resetForm('form')
    },
    cityOptions(newVal) {
      this.getRegionCode()
    }
  },
  mounted() {
    this.proName = this.$route.query.proName
    this.getDictData()
    this.getLayerNumList()
  },
  methods: {
    // 查看签字文件
    async viewSignedFile() {
      if (this.formData.signatureFile && this.formData.signatureFile.length) {
        const fileId = this.formData.signatureFile[0].fileId
        // const fileName = this.formData.explorationCode + '签字文件'
        const res = await fileDownLoad(fileId)
        if (!res) return
        // this.downloadFileFlowPdf(res, fileName)
        const blob = new Blob([res], { type: 'application/pdf;charset=UTF-8' })
        const pdfUrl = URL.createObjectURL(blob)
        this.$emit('update:pdfUrl', pdfUrl)
      } else {
        this.msgWarning('暂无签字文件')
      }
    },
    // 下载
    async downSignedFile() {
      if (this.formData.signatureFile && this.formData.signatureFile.length) {
        const fileId = this.formData.signatureFile[0].fileId
        const fileName = this.formData.explorationCode + '签字文件'
        const res = await fileDownLoad(fileId)
        if (!res) return
        this.downloadFileFlowPdf(res, fileName)
      } else {
        this.msgWarning('暂无签字文件')
      }
    },
    // 分层变化
    changeLayerNum(row, LayerNum) {
      row.edit = true
      const changeLayerNumData = this.tableData.filter(item => { return item.edit })
      this.changeLayerNumData = changeLayerNumData.map(item => {
        return { layerNum: item.layerNum, id: item.outSideId }
      })
      this.$emit('tableDataChange', this.changeLayerNumData)
      console.log(this.tableData, this.changeLayerNumData)
    },
    // 获取分层
    async getLayerNumList() {
      const { data } = await listHierarchicaSettingByProId(this.proId)
      this.LayerNumList = data
    },
    // 翻译钻探类型
    formatDrillingType(drillingType) {
      if (drillingType) return this.selectDictLabel(this.drillingTypeOptions, drillingType)
    },
    // 翻译钻孔子类
    formatExplorationType(explorationType) {
      if (explorationType) return this.selectDictLabel(this.explorationType, explorationType)
    },
    // 翻译光泽反应
    formatGlossReaction(row) {
      return this.selectDictLabel(this.glossReactionList, row.glossReaction)
    },
    // 翻译摇振反应
    formatVibrationResponse(row) {
      return this.selectDictLabel(this.vibrationResponseList, row.vibrationResponse)
    },
    // 翻译干强度
    formatDryStrength(row) {
      return this.selectDictLabel(this.dryStrengthList, row.dryStrength)
    },
    // 翻译韧性
    formatTenacity(row) {
      return this.selectDictLabel(this.tenacityList, row.tenacity)
    },
    // 状态(粘性土)翻译
    formatSoilStatus(row) {
      return this.selectDictLabel(this.soilStatusList, row.soilStatus)
    },
    // 翻译湿度
    formatHumidity(row) {
      return this.selectDictLabel(this.humidityList, row.humidity)
    },
    // 密度翻译
    formatDensity(density) {
      return this.selectDictLabel(this.densityList, density)
    },
    // 土的名称翻译
    formatSoilNameList(soilName) {
      return this.selectDictLabel(this.soilNameList, soilName)
    },
    formatRemark(remark) {
      if (remark) {
        return JSON.parse(remark)
      }
    },
    // 获取湿度、 密度、状态字典
    async getDictData() {
      const { data: { gloss_reaction, vibration_response, dry_strength, tenacity, humidity, density, soil_status, soil_name }} = await getDictTypes('gloss_reaction,vibration_response,dry_strength,tenacity,humidity,density,soil_status,soil_name')
      this.glossReactionList = gloss_reaction
      this.vibrationResponseList = vibration_response
      this.dryStrengthList = dry_strength
      this.tenacityList = tenacity
      this.humidityList = humidity
      this.densityList = density
      this.soilStatusList = soil_status
      this.soilNameList = soil_name
    },
    // 图片展示
    showPicture(outSideId, index) {
      this.imgIdList = []
      getOutSidePhone({ outSideId }).then(res => {
        this.imgIdList = res.data
        if (res.data[0]) {
          this.$nextTick(() => {
            this.$refs.previewVideo.previewBigImg()
          })
        } else {
          this.msgWarning('暂无照片')
        }
      })
    },
    // 根据地区编码回显地区
    getRegionCode() {
      const { formData: { province, city, county }} = this
      if (!county) return
      const region = this.cityOptions[0].children.find(item => {
        return item.children && item.children.some(city => city.value === province)
      })
      const sheng = region.children.find(sheng => sheng.value === province)
      const shi = sheng.children.find(shi => shi.value === city)
      const xian = shi.children.find(xian => xian.value === county)
      this.currentProvince = (region.label + sheng.label + shi.label + xian.label) || ''
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  .exploration-data{
    margin-bottom: 0;
    position: relative;
    .main-content{
      padding:0;
      .main-content-body-top{
        position: relative;
        background: none;
        color:#fff;
        .view-signed-file{
          position: absolute;
          right:0;
          top:5px;
          cursor: pointer;
          z-index: 1;
        }
      }
    }
  }
.append-input {
  width: 100%;
  .el-input-group__append {
    padding: 0 5px;
    left: -23px;
  }
}
.show-img {
  font-size: 20px;
  cursor: pointer;
  position: relative;
  z-index: 5;
}
.show-image {
  position: relative;
  width: 14px;
  height: 14px;
  left: -16px;
  top: 0;
  opacity: 0;
}
</style>
